<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>m3u8播放器</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  </head>
  <body>
    <div class="container">
      <div class="header">
          <span>请输入m3u8播放链接</span>
          <div class="input-box">
        <input type="text" id="url_input"/>
        <span class="button" onclick="play()">播放</span>
      </div>
      </div>
      <video src="https://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8" controls></video>
      
    </div>
    <script>
      const testUrl = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8'
      function play() {
        var url = document.getElementById('url_input').value|| testUrl;

          var video = document.querySelector('video');
          var hls = new Hls();
          hls.loadSource(url);
          hls.attachMedia(video);
          hls.on(Hls.Events.MANIFEST_PARSED, function() {
            video.play();
          });
      }
    </script>
  </body>
</html>
<style>
.container{
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.header{
    width: 100%;
    text-align: center;
}
.header input{
    height: 40px;
}
.input-box{
    display: flex;
    justify-content: center;
    align-items: center;}
#url_input{
    width: 90%;
    margin: 20px 0;
}
video{
  width: 80%;
  height: 80%;
    border: 1px solid #ccc;
}
.button{
  display: inline-block;
    width: 80px;
    height: 46px;
    background: #0376c2;
    color: #fff;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
}
</style>